<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
  th,
  td {
    padding: 10px 40px;
    text-align: center;
  }

  #myTable tbody tr:hover {
    background-color: rgb(255, 204, 204);
  }
</style>
<div id="app">
  <input type="text" placeholder="请输入名称" v-model="name" />
  <input type="text" placeholder="请输入链接" v-model="link" />
  <input type="text" placeholder="请输入描述" v-model="desc" />
  <button @click="add">添加</button>
  <table border="1" id="myTable">
    <thead>
      <tr :style="tr_sty">
        <th>ID</th>
        <th>名称</th>
        <th>链接</th>
        <th>描述</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="(item,index) in arr"
        :style="{backgroundColor: index % 2 == 0 ? '#f2f2f2' : '#ffffff'}"
      >
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.link}}</td>
        <td>{{item.desc}}</td>
        <td><button @click="del(index)">删除</button></td>
      </tr>
    </tbody>
  </table>
</div>

<!-- 计算器 -->
<div class="app1">
  <input type="number" placeholder="请输入第一个数字" v-model="num1" />
  <select v-model="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type="number" placeholder="请输入第二个数字" v-model="num2" />
  <button @click="calculate">=</button><span>{{result}}</span>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      tr_sty: "background-color: #33a0d6;color: white;",
      name: "",
      link: "",
      desc: "",
      arr: [
        {
          id: 1,
          name: "哔哩哔哩",
          link: "https://www.bilibili.com",
          desc: "bilibili",
        },
        {
          id: 2,
          name: "今日头条",
          link: "https://www.toutiao.com",
          desc: "toutiao",
        },
        {
          id: 3,
          name: "百度",
          link: "https://www.baidu.com",
          desc: "baidu",
        },
        {
          id: 4,
          name: "腾讯网",
          link: "https://www.qq.com",
          desc: "qq",
        },
      ],
    },
    methods: {
      add: function () {
        this.arr.push({
          id: this.arr.length + 1,
          name: this.name,
          link: this.link,
          desc: this.desc,
        });
      },
      del: function (index) {
        this.arr.splice(index, 1);
      },
    },
  });

  new Vue({
    el: ".app1",
    data() {
      return {
        num1: "",
        operator: "",
        num2: "",
        result: '',
      };
    },
    methods: {
      calculate() {
        switch (this.operator) {
          case "+":
            this.result = parseFloat(this.num1) + parseFloat(this.num2);
            break;
          case "-":
            this.result = parseFloat(this.num1) - parseFloat(this.num2);
            break;
          case "*":
            this.result = parseFloat(this.num1) * parseFloat(this.num2);
            break;
          case "/":
            if (parseFloat(this.num2) === 0) {
              this.result = "除数不能为0";
            } else {
              this.result = parseFloat(this.num1) / parseFloat(this.num2);
            }
            break;
        }
      },
    },
  });

  //  隔行换色
  //   var trs = document.querySelectorAll("tbody tr");
  //   for (var i = 0; i < trs.length; i++) {
  //     if (i % 2 == 0) {
  //       trs[i].style.backgroundColor = "#f2f2f2";
  //     } else {
  //       trs[i].style.backgroundColor = "#ffffff";
  //     }
  //   }
</script>
